<template>
  <div id='app'>
    <treeselect v-model='value' :multiple='multiple' :options='options' style='width:240px'
                :searchable='searchable' :clearable='true' :default-expand-level='2' placeholder='please select'
                @clear='handleClear' :limit='1'   />
    <el-select>
      <el-option>

      </el-option>
    </el-select>
    <el-button type='primary' @click='getValue'>获取值</el-button>


  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  // register the component
  components: { Treeselect },
  data() {
    return {
      myValue: undefined,
      value: null,
      multiple: true, // 多选
      searchable: false, // 搜索框
      clearable: true, // 清除
      disabled: false, // 禁用
      limit: 2, // 限制

      options: [{
        id: '1',
        label: '流量报警',
        children: [{
          id: '10-1001',
          label: '流量不足'
        }, {
          id: '10-1002',
          label: '超流量'
        }]
      }, {
        id: '2',
        label: '工况报警',
        children: [{
          id: '10-1003',
          label: '状态异常'
        }, {
          id: '10-1004',
          label: '移动网络异常'
        }, {
          id: '10-1005',
          label: 'GPS异常'
        }, {
          id: '10-1006',
          label: 'CPU数据异常'
        }, {
          id: '10-1007',
          label: 'GPU处理异常'
        }, {
          id: '10-1008',
          label: '网络终端异常'
        }]
      }]
    }

  },
  methods: {
    getValue() {
      console.log(this.value)
    },
    handleClear(a) {
      console.log('clear')
      console.log('清除事件：', a)
    }
  }
}
</script>
<style scoped>
.el-button {
  margin: 30px;
}
</style>
